<template>
  <div class="container" id="fullpage">
    <div class="section">
      <div class="header">
        <Header :opacity="0.7"></Header>
      </div>
      <img class="banner" v-if="isSmallScreen" src="./images/banner_phone.png" alt="">
      <el-carousel trigger="click" height="100vh" v-else arrow="never">
        <el-carousel-item>
          <img class="banner" src="../../../public/images/banner1.png" alt="" />
        </el-carousel-item>
        <el-carousel-item>
          <img class="banner" src="../../../public/images/banner2.png" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 目录 -->
    <div class="section">
      <div class="directory">
        <img v-if="!isSmallScreen" v-show="page1animation" src="./images/directory_title.png" alt="">
        <div class="directory_title" v-else>绘美山河细则目录</div>
        <div class="directory_list" v-if="page1animation">
          <div class="directory_item item1">
            <img @click="toPages('/introduced')" src="./images/directory1-10.png" alt="" loading="lazy">
          </div>
          <div v-if="!isSmallScreen" class="directory_item item2">
            <img @click="toPages('/meaning')" src="./images/directory2-10.png" alt="" loading="lazy">
          </div>
          <div v-if="isSmallScreen" class="directory_item item2">
            <img @click="toPages('/honor')" src="./images/directory4-10.png" alt="" loading="lazy">
          </div>
          <div @click="toPages('/sample')" class="directory_item item3">
            <img src="./images/directory3-10.png" alt="" loading="lazy">
          </div>
          <div v-if="!isSmallScreen" class="directory_item item4">
            <img @click="toPages('/honor')" src="./images/directory4-10.png" alt="" loading="lazy">
            <img @click="toPages('/activeDetail')" src="./images/directory5-10.png" alt="" loading="lazy">
          </div>
          <div v-if="isSmallScreen" class="directory_item item4">
            <img @click="toPages('/activeDetail')" src="./images/directory5-10.png" alt="" loading="lazy">
          </div>
          <div class="directory_item item5">
            <img @click="toPages('/enroll')" src="./images/directory6-10.png" alt="" loading="lazy">
          </div>
          <div class="directory_item item6">
            <img @click="toPages('/beforeTerm')" src="./images/directory7-10.png" alt="" loading="lazy">
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="meaning">
        <div class="meaning_title">
          <img src="./images/meaning_title.png" alt="" loading="lazy">
        </div>
        <div class="meaning_content">
          弘扬中华优秀传统文化，发扬爱国主义精神，加强青少年交流学习，促进书画艺术发展，推动全民美育素质提高，
          引导青少年感受伟大祖国的大好河山，以自己的独特的视角，通过书法、绘画、手工、摄影等形式来表达生活中和心中的真善美，
          激发青少年爱国主义精神，为祖国的繁荣昌盛贡献自己的力量。
        </div>
      </div>
    </div>
    <div class="section">
      <div class="news">
        <div class="news_item">
          <div class="news_item_title">
            新闻动态
          </div>
          <div>
            <img src="./images/news_contnt-10.png" alt="" loading="lazy">
          </div>
          <div class="news_item_content">
            <div>“绘美山河”|中小学生家长一定要知道的校内争章加分利器</div>
            <div>绘美山河|民政部及央美权威认证的青少年艺术交流活动</div>
            <div>“绘美山河”|升学择校首选民政部认可的书画艺术活动</div>
            <div class="underline">参加“绘美山河”青少年书画艺术活动，拿高含金量评优争章证书</div>
          </div>
        </div>
        <div class="news_item">
          <div class="news_item_title">
            相关公告
          </div>
          <div class="news_item_content">
            <div class="underline">2024第三届·绘美山河青少年艺术作品征集活动正式开启</div>
            <div class="underline">【佳作赏析】绘美山河优秀作品展示</div>
            <div class="underline">第二届·绘美山河青少年艺术作品征集活动正式截止</div>
            <div class="underline">【终审延期通知】请大家合理安排时间，确保顺利参与活动！</div>
            <div class="underline">【初审截稿通知】活动即将进入终审阶段，预祝大家取得佳绩！</div>
          </div>
        </div>
        <div class="news_item">
          <div class="news_item_title">
            联系方式
          </div>
          <div class="news_item_content">
            <div>组委会官方电话：010-60526023</div>
            <div style="margin: 1vw 0;">官方公众号二维码：</div>
          </div>
          <img class="qrCode" src="./images/qrCode-10.png" alt="">
        </div>
      </div>
    </div>
    <div class="section">
      <div class="footer">
        <Footer></Footer>
      </div>
    </div>
  </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '../../components/Header/Header.vue';
import fullpage from "fullpage.js";

export default {
  name: 'Home',
  components: {
    Header, Footer
  },
  data() {
    return {
      isSmallScreen: window.innerWidth < 960, // 初始判断
      currentSection: 0,
      fullpageApi: null,
      page1animation: false,
      timeoutId: null,  // 用于存储 setTimeout 的 ID
    };
  },
  mounted() {
    // 监听窗口尺寸变化
    window.addEventListener('resize', this.checkScreenSize);
    // 初始化 fullpage.js
    if (!this.isSmallScreen) {
      this.initFullPage();
    }else{
      this.page1animation = true;
    }
  },
  beforeDestroy() {
    // 清理事件监听
    window.removeEventListener('resize', this.checkScreenSize);
    // 在组件销毁前销毁 fullpage 实例
    if (this.fullpageApi) {
      this.fullpageApi.destroy('all');
      this.fullpageApi = null;
    }
  },
  watch: {
    currentSection(newValue) {
      if (newValue === 1) {
        if (this.timeoutId) {
          clearTimeout(this.timeoutId);
        }
        this.page1animation = true;
      } else {
        // 设置 0.7 秒后将 page1animation 设为 false
        this.timeoutId = setTimeout(() => {
          this.page1animation = false;
        }, 700);
      }
    },
  },
  methods: {
    // 跳转页面
    toPages(url) {
      this.$router.push(url);
    },
    //监听视口宽度
    checkScreenSize() {
      this.isSmallScreen = window.innerWidth < 960; // 更新状态
    },
    initFullPage() {
      this.fullpageApi = new fullpage("#fullpage", {
        anchors: ["page1", "page2", "page3", "page4", "page5"],
        navigation: true,
        navigationPosition: "right",
        scrollingSpeed: 700,
        autoScrolling: true,
        fitToSection: true,
        onLeave: (origin, destination) => {
          this.currentSection = destination.index;
        },
      });
    },
  },
};
</script>
<style scoped>
.container {
  position: relative;
}

.banner {
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  position: absolute;
  z-index: 20;
}

.directory {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-size: 100% 100%;
  background-image: url('./images/directory_background.png');
}

.directory>img {
  width: 5vw;
  height: 80vh;
}

.directory_list {
  width: 75vw;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.directory_item {
  width: 10vw;
  height: 80vh;
}

.directory_item>img {
  width: 100%;
  height: 17vw;
}

.directory_item>img:hover {
  border: 2px solid #fff;
  cursor: pointer;
  box-sizing: border-box;
}

.item1 {
  margin-top: 50vh;
  animation: slideIn 2s forwards;
  opacity: 0;
  animation-delay: 0s;
}

.item2 {
  margin-top: 70vh;
  animation: slideOut 2s forwards;
  opacity: 0;
  animation-delay: 0.5s;
}

.item3 {
  margin-left: 5vw;
  animation: slideIn 2s forwards;
  animation-delay: 1s;
  opacity: 0;
}

.item4 {
  margin-top: 10vh;
  animation: slideOut 2s forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

.item5 {
  margin-left: 5vw;
  margin-top: 40vh;
  animation: slideIn 2s forwards;
  opacity: 0;
  animation-delay: 2s;
}

.item6 {
  margin-top: 30vh;
  opacity: 0;
  animation: slideOut 2s forwards;
  animation-delay: 2.5s;
}

.meaning {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
  background-image: url('./images/meaning_background.png');
}

.meaning img {
  width: 20vw;
}

.meaning_content {
  width: 70vw;
  font-size: 40px;
  text-indent: 2em;
  color: #fff;
  margin-top: 5vw;
  letter-spacing: 10px;
}

.news {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-size: 100% 100%;
  background-image: url('./images/news_background-10.png');
}

.news_item {
  width: 25vw;
  height: 60vh;
}

.news_item img {
  width: 100%;
  margin-bottom: 3vw;
}

.news_item_title {
  width: 10vw;
  margin-bottom: 3vw;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
  background-image: url('./images/news_title-10.png');
}

.news_item_content {
  font-size: 18px;
}

.underline {
  padding: 1vw 0;
  border-bottom: 2px dashed #333;
}

.news_item_content div {
  margin: 10px 0;
}

.news_item .qrCode {
  width: 50%;
}

.news_item_content div:hover {
  color: #690000;
}

.footer {
  height: 15vw;
}

/* 动画定义 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30vh);
    /* 从下方滑入 */
  }

  to {
    opacity: 1;
    transform: translateY(0);
    /* 最终回到正常位置 */
  }
}

@keyframes slideOut {
  from {
    opacity: 0;
    transform: translateY(-30vh);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 手机/小屏幕 */
@media screen and (max-width: 960px) {
  .directory {
    height: auto;
    flex-direction: column;
    background-size: 150% 25%;
    margin-top: -2vw;
  }

  .directory_title {
    font-size: 28px;
    letter-spacing: 5px;
    color: #fff;
    margin-top: 5vw;
  }

  .directory_list {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
  }

  .directory_item {
    width: 35vw;
    height: 60vw;
  }

  .directory_item>img {
    width: 100%;
    height: 100%;
  }

  .item1,
  .item2,
  .item3,
  .item4,
  .item5,
  .item6 {
    margin: 5vw 0;
  }

  .meaning {
    width: 100%;
    height: 50vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('./images/meaning_background.png');
  }

  .meaning img {
    width: 40vw;
  }

  .meaning_content {
    width: 85vw;
    font-size: 15px;
    letter-spacing: 5px;
  }

  .news {
    height: auto;
    flex-direction: column;
    justify-content: space-around;
    background-size: 100% 100%;
    background-image: url('./images/news_background-10.png');
  }

  .news_item {
    width: 80vw;
    height: auto;
  }

  .news_item img {
    width: 100%;
    margin: 5vw 0;
  }

  .news_item_title {
    width: 40vw;
    margin: 5vw 0;
    font-size: 25px;
  }

  .news_item_content {
    font-size: 16px;
  }

  .underline {
    padding: 3vw 0;
    border-bottom: 2px dashed #333;
  }

  .news_item_content div {
    margin: 5vw 0;
  }

  .news_item .qrCode {
    width: 50%;
  }

  .footer {
    height: 30vw;
  }
}
</style>
